<template>
	<u-popup v-model="showdz" mode="bottom" @close="close" length="52%" border-radius="30">
		<view class="hgzbox">
			<view class="xsquy">
				{{title}}
			</view>
			<view class="cityquxdz">
				<view class="shenfdz">
					省/地区
				</view>
				<view class="shif">
					请选择 市
				</view>
				<view class="shif">
					请选择 区
				</view>
			</view>
				<u-picker class="cheliquyu" style="margin-top: 94px !important;" confirm-color="#343434" cancel-color="#FFE23E" mode="region"
				 v-model="showdz" :area-code='["51", "5101", "510104"]'  @cancel="cancel" @confirm="confirmdz"></u-picker>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: "Taddress",
		props: ['showdz', 'title'],
		data() {
			return {
				
			};
		},
		methods: {
			confirmdz(e) {
				this.$emit('confirmdz', e)
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin dingwei() {
		/* 定义flex容器 */
		display: flex;
		/*设置容器内部容器的排列方向*/
		flex-direction: row;
	}

	@mixin danhang1() {
		/* 单行...*/
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	@mixin imgsize() {
		width: 100%;
		height: 100%;
	}

	@mixin colorbj() {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
	}

	@mixin shuanghang2() {
		/* 两行...*/
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		white-space: normal !important;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	@mixin justify() {
		display: -webkit-flex;
		/* Safari */
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.hgzbox {
		font-family: PingFang SC;
		font-weight: 500;
		text-align: center;

		.xsquy {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(54, 54, 54, 1);
			border-bottom: 1px solid #EEEEEE;
			line-height: 96rpx;
			text-align: left;
			padding-left: 42rpx;
		}

		.quguo {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			margin-top: 21rpx;
		}

		.cityquxdz {
			width: 750rpx;
			height: 64rpx;
			background: rgba(241, 241, 241, 1);
			/* margin-top: 26rpx; */
			@include dingwei;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(146, 146, 146, 1);

			.shenfdz {
				width: 50%;
				line-height: 64rpx;
			}

			.shif {
				width: 50%;
				line-height: 64rpx;
			}
		}

		.cityqux {
			width: 750rpx;
			height: 64rpx;
			background: rgba(241, 241, 241, 1);
			margin-top: 26rpx;
			@include dingwei;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(146, 146, 146, 1);

			.shenf {
				width: 50%;
				line-height: 64rpx;
			}

			.shif {
				width: 50%;
				line-height: 64rpx;
			}
		}

		.hgztitle {
			border-bottom: 1px solid #EEEEEE;
			line-height: 96rpx;
			font-size: 36rpx;
			color: rgba(51, 51, 51, 1);
		}

		.imgtexts {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(102, 102, 102, 1);
			line-height: 96rpx;
			border-bottom: 1px solid #EEEEEE;
		}

		.hgxz {
			line-height: 120rpx;
			font-size: 32rpx;
			color: rgba(102, 102, 102, 1);
		}

		.sucai {
			@include dingwei;
			border-bottom: 1px solid #EEEEEE;

			.sucaitext {
				width: 50%;
				line-height: 120rpx;
				text-align: center;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
			}
		}
	}
	// 发布新车 弹框
	.cheliquyu {
		height: 500rpx;
		margin-top: 260rpx;
		 /deep/ .u-mask-show {
			background-color: rgba(0, 0, 0, 0) !important;
			display: none;
		}
		 /deep/ .u-picker-header {
			margin: 0 auto;
			padding: 0 42rpx;
			}
		 /deep/ .u-btn-picker--primary {
			margin-top: 1000rpx;
			z-index: 99;
			width: 334rpx;
			height: 88rpx;
			background: linear-gradient(-90deg, rgba(251, 211, 33, 1), rgba(255, 226, 62, 1));
			border-radius: 0px 50rpx 50rpx 0px;
			line-height: 60rpx;
			}
		 /deep/ .u-btn-picker--tips {
			margin-top: 1000rpx;
			z-index: 99;
			width: 334rpx;
			height: 88rpx;
			background: rgba(52, 52, 52, 1);
			border-radius: 50rpx 0px 0px 50rpx;
			line-height: 60rpx;
			}
		 /deep/ .uni-picker-view-indicator {
			height: 80rpx;
			top: 50%;
			}
		 /deep/ .uni-picker-view-indicator {
			border-top: 1px solid #FBB000;
			border-bottom: 1px solid #FBB000;
			}
		 /deep/ .u-content {
			border-radius: 44rpx 0px 0px 44rpx !important;
			}
	}
	
</style>
